<template>
  <view class="container">
    <!-- 商品图片 -->
    <image :src="product.image" mode="aspectFill" class="product-image"></image>

    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-name">{{ product.name }}</text>
      <text class="product-price">￥{{ product.price }}</text>
      <text class="product-description">{{ product.description }}</text>

      <!-- 库存信息 -->
      <text class="product-stock">库存：{{ product.stock }}件</text>

      <!-- 数量选择器 -->
      <view class="quantity-selector">
        <text class="quantity-label">购买数量：</text>
        <view class="quantity-control">
          <button class="btn-minus" @click="decreaseQuantity">-</button>
          <text class="quantity">{{ quantity }}</text>
          <button class="btn-plus" @click="increaseQuantity">+</button>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <button class="btn-add-to-cart" @click="addToCart">加入购物车</button>
      <button class="btn-buy" @click="buyNow">立即购买</button>
    </view>
  </view>
</template>

<script>
import product from "@/pages/product/product.vue";
// import redis from "redis";

export default {
  data() {
    return {
      product: {}, // 商品信息
      quantity: 1 // 购买数量，默认为1
    };
  },
  onLoad(options) {
    const productId = options.id;
    this.quantity = options.quantity || 1; // 接收传递的数量
    this.loadProductDetail(productId);
  },
  methods: {
    async loadProductDetail(productId) {
      const res = await uni.request({
        url: `http://localhost:8080/app/shop/item/${productId}`,
        method: 'GET'
      });
      this.product = res[1].data.data;
      console.log('product信息：',this.product)
    },
    // 增加数量
    increaseQuantity() {
      if (this.quantity < this.product.stock) {
        this.quantity += 1;
      } else {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        });
      }
    },

    // 减少数量
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity -= 1;
      }
    },
    // 加入购物车
    async addToCart() {
      if (this.quantity > this.product.stock) {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        });
        return;
      }

      const userId = uni.getStorageSync('token'); // 获取当前用户的 ID
      const cartItem = this.product;

      const result = await uni.request({
        url: `http://localhost:8080/app/api/cart/add?userId=${userId}`, // 将 userId 拼接到 URL 中
        method: 'POST',
        data: cartItem, // 直接传递 cartItem 作为请求体
        header: {
          'Content-Type': 'application/json' // 设置请求头
        }
      });

      console.log(result[1]);

      if (result[1].statusCode === 200) {
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '添加失败',
          icon: 'none'
        });
      }
    },

    // 立即购买
    buyNow() {
      //再次查看商品库存
      this.loadProductDetail(this.product.id);
      if (this.quantity > this.product.stock) {
        uni.showToast({
          title: '库存不足',
          icon: 'none'
        });
        return;
      }
      //封装数据
      const product = {
        checked: true,
        id: this.product.id,
        image:this.product.image,
        name:this.product.name,
        price:this.product.price,
        quantity:this.quantity,
      }
      let goodsData = [];
      goodsData.push(product)
      console.log("product:",product)
      console.log("goodsData:",goodsData)
      // 将 goodsData 转换为 JSON 字符串
      const goodsDataString = JSON.stringify(goodsData);

      // 跳转到订单创建页面，并传递购物车数据
      uni.navigateTo({
        url: `/pages/order/createProductOrder?data=${encodeURIComponent(goodsDataString)}`,
      });
    }
  }
};
</script>

<style scoped>

.product-stock {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.container {
  padding: 20rpx;
  padding-bottom: 120rpx; /* 留出底部栏的空间 */
}

.product-image {
  width: 100%;
  height: 400rpx;
  border-radius: 10rpx;
}

.product-info {
  margin-top: 20rpx;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
}

.product-price {
  font-size: 28rpx;
  color: #ff5000;
}

.product-description {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
/* 数量选择器样式 */
.quantity-selector {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.quantity-label {
  font-size: 28rpx;
  color: #333;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.btn-minus,
.btn-plus {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 1rpx solid #ddd;
  border-radius: 50%;
  font-size: 28rpx;
  background-color: #f8f8f8;
}

.quantity {
  margin: 0 20rpx;
  font-size: 32rpx;
  color: #333;
}

/* 底部栏样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #eee;
  padding: 0 20rpx;
}

/* 按钮样式 */
.btn-add-to-cart,
.btn-buy {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
}

.btn-add-to-cart {
  background-color: #ff9500;
  color: #fff;
}

.btn-buy {
  background-color: #007aff;
  color: #fff;
}
</style>
